<script lang="ts">
import { ref, toRefs } from 'vue'
import { storeToRefs } from 'pinia'
export default {
  name: 'Count'
}
</script>
<script setup lang="ts">
//import wang from '../stores/Counter.ts'

import { useCounterStore } from '../stores/Counter.ts'

let count_old = ref(1)

const counterStore = useCounterStore()
//解构变量
const { count, username, age, user, toUpper } = storeToRefs(counterStore)
// console.log('toRefs', storeToRefs(counterStore))

//console.log('count: ', counterStore.username)

const change = () => {
  //console.log('chage')
  //3种方式改变 pinia中state的值
  //第一种  counterStore.变量 = 值
  // counterStore.count = 365
  // counterStore.username = '王总'
  // counterStore.age = 38
  // counterStore.user.job = '程序员'

  //第二种 counterStore.$patch= {}
  // counterStore.$patch({
  //   count: 365,
  //   user: { job: '歌手', name: '王总' }
  // })

  //第三种 在store的action里面中定义个函数,来执行修改
  counterStore.add()
}
</script>

<template>
  <div><h1>Count</h1></div>
  <div>
    <button @click="count_old++">加1</button>
    <span>{{ count_old }}</span>
  </div>

  <hr />
  <div>
    从 pinia 中取到的count的值 <br />
    <p>count: {{ count }} <button @click="change">点我+1</button></p>
    <p>username: {{ username }} ,getter中的值: {{ toUpper }}</p>
    <p>age: {{ age }}</p>
    <p>user:{{ user.id }} | {{ user.name }} | {{ user.job }}</p>

    <button @click="counterStore.add">点我改变</button>
  </div>
</template>
<style scope>
</style>